<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1>Todo List</h1>
    <ul>
        <li v-for="item in todoList">{{item.id}} --- {{item.text}} --- {{item.done}}</li>
    </ul>
    <hr>
    <h1>Done List</h1><h5>Done {{$store.getters.doneTodosCount}}</h5>
    <ul>
        <li v-for="item in doneList">{{item.text}} --- {{item.done}}</li>
    </ul>
    <hr>
    <p >{{ todo }}</p>
    <input type="number" v-model="todoId">
    <button @click="search">查找</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>
<script>
    // 声明状态管理机
    const store = new Vuex.Store({
        state: {
            todos: [
                { id: 1, text: 'eat', done: true },
                { id: 2, text: 'sleep', done: false }
            ]
        },
        // 有时候可能需要获取共享数据中的某几条，为了避免所有用到地方都要写相同的代码，vuex提供getter方法
        getters: {
            // getter方法与computed属性函数相似，都会在函数依赖的数据变化时重新计算，结果缓存，只要依赖的数据不变下次不再重新计算
            // 第一个参数是状态对象 state
            doneTodos: state => {
                // 只返回 done = true的
                return state.todos.filter(todo => todo.done);
            },
            // 可以将getters对象作为参数传递，方法中可以获取getters其他getter方法
            doneTodosCount: (state, getters) => {
                return getters.doneTodos.length;
            },
            // 此外还可以定义getter方法参数，可以通过参数获取对应的数据
            // state => (参数列表) => {..} 该方法返回值将不会被缓存
            getTodoById: state => (id) => {
                console.log('run getTodoById');
                // 返回符合条件的第一条数据
                return state.todos.find(todo => todo.id === id);
            }
        },
        mutations: {
            increment(state) {
                state.count ++;
            }
        }
    });

    let vm = new Vue({
        el: "#app",
        data: {
            todoList: [],
            todoId: 0,
            todo: null,
        },
        created() {
            this.todoList = this.$store.state.todos;
        },
        methods: {
            search() {
                // 输入框内容是string，需要转化一次
                this.todoId = parseInt(this.todoId);
                console.log('todo',this.todoId, this.$store.getters.getTodoById(this.todoId));
                this.todo = JSON.stringify(this.$store.getters.getTodoById(this.todoId));
            }
        },
        computed: {
            doneList: function () {
                console.log(this.$store.getters.doneTodos);
                // 通过getters方法获取
                return this.$store.getters.doneTodos;
            }
        },
        // 注入状态管理器
        store
    });

</script>
</body>
</html>
